<%- include("header",{type:'signup'}) %>
	<div class="container">
		<form class="form create" method="post">
			<div>
				<label>用户名：</label> 
				<input placeholder="请输入用户名" type="text" name="name">
			</div>
			<div>
				<label>密码：</label> 
				<input placeholder="请输入密码" class="password" type="password" name="password">
			</div>
			<div>
				<label>重复密码：</label> 
				<input placeholder="请确认密码" class="repeatpass" type="password" name="repeatpass">
			</div>
			<div>
				<label>上传头像：</label>
				<input type="file" name="avator" id="avator">
				<input type="hidden" id="avatorVal">
				<img class="preview" alt="预览头像">
			</div>
			<div class="submit">注册</div>
		</form>
	</div>
	<script>
		$(window).keyup(function (e) {
			//console.log(e.keyCode)
			if (e.keyCode == 13) {
				$('.submit').click()
			}
		})
		$('#avator').change(function(){
			if (this.files.length != 0) {
				var file = this.files[0],
					reader = new FileReader();
				if (!reader) {
					this.value = '';
					return;
				};
				console.log(file.size,file.type)
				// if (file.size >= 1024 * 1024 / 2) {
				// 	fade("请上传小于512kb的图片!")
				// 	return 
				// }
				if (!/image/g.test(file.type)) {
					fade("请上传图片文件!")
					$('#avatorVal').val('')
					$('form .preview').attr('src', '')
					$('form .preview').fadeOut()
					return 
				}
				reader.onload = function (e) {
					this.value = '';
					$('form .preview').attr('src', e.target.result)
					$('form .preview').fadeIn()
					 var image = new Image();
					 image.onload = function(){
						 var canvas = document.createElement('canvas');
						 var ctx = canvas.getContext("2d");
						 canvas.width = 100;
						 canvas.height = 100;
						 ctx.clearRect(0, 0, 100, 100);
						 ctx.drawImage(image, 0, 0, 100, 100);
						 var blob = canvas.toDataURL("image/png");
						 $('#avatorVal').val(blob)
					 }
					 image.src = e.target.result
				};
				reader.readAsDataURL(file);
			};
		})
		$('.submit').click(function(){
			// console.log($('.form').serialize())
			if ($('input[name=name]').val().trim() == '') {
				fade('请输入用户名！')
			}else if($('input[name=name]').val().match(/[<'">]/g)){
				fade('请输入合法字符！')
			}else if($('#avatorVal').val() == ''){
				fade('请上传头像！')
			}else{
				$.ajax({
					url: "/signup",
					data: {
						name: $('input[name=name]').val(),
						password: $('input[name=password]').val(),
						repeatpass: $('input[name=repeatpass]').val(),
						avator: $('#avatorVal').val(),
					},
					type: "POST",
					cache: false,
					dataType: 'json',
					success: function (msg) {
					   if(msg.code == 200){
						   fade('注册成功')
						   setTimeout(function(){
							   window.location.href = "/signin"	  
						   },1000)

					   }else{
 							fade(msg.message)
					   }
					},
					error: function () {
						alert('异常');
					}
				})			
			}
		})	
	</script>
<% include footer %>
